<template>
  <view>
    <u-sticky>
      <view :style="{ padding: '20rpx', backgroundColor: '#fff' }">
        <u-input
          v-model="queryForm.search"
          placeholder="搜索景点名称"
          suffixIcon="search"
          clearable
          suffixIconStyle="color: #909399"
          shape="circle"
          border="none"
          fontSize="13px"
          @confirm="handleSearch"
          :customStyle="{
            background: '#FFFFFF',
            padding: '6px',
            boxShadow: '0 0 20rpx rgba(186, 186, 186, 0.1)',
          }"
        ></u-input>
      </view>
    </u-sticky>
    <view class="body">
      <template v-if="isIndex">
        <u-image :src="coverPath" width="100%" height="284rpx" radius="20rpx" />
        <Sub-title
          v-if="scenicList.length != 0"
          label="游点不一样"
          bottom-color="#E9F4F4"
        />
        <view class="y-row" v-if="scenicList.length != 0">
          <view
            class="y-item"
            v-for="(i, k) in scenicList"
            :key="k"
            :style="{
              backgroundImage: `url(${i.image})`,
            }"
            @click="handleScenic(i)"
          >
            <view class="y-bg">
              <u-text :text="i.title" lines="2" color="#E9F4F4" size="24rpx" bold />
              <text>{{ i.tag }}</text>
            </view>
          </view>
        </view>
        <Sub-title v-if="dataList.length != 0" label="热门推荐" bottom-color="#E9F4F4" />
      </template>
      <view class="w-row">
        <Popular-scenic
          v-for="(i, k) in dataList"
          :key="k"
          :style="{
            marginRight: k % 2 == 0 ? '30rpx' : '0',
          }"
          :row="i"
          @click="handleScenic"
        />
        <u-loadmore v-if="dataList.length != 0" :status="status" height="60rpx" />
        <u-empty
          v-else
          :icon="webSrc('/assets/web_img/empty.png')"
          width="162"
          height="162"
          text="暂无周边景点"
          textColor="#bababa"
        />
      </view>
    </view>
  </view>
</template>

<script>
import PopularScenic from "@/pages/qiu/cp/PopularScenic";

import { qiuOther, qiuAroundList } from "@/request/qiuApi.js";
export default {
  components: { PopularScenic },
  data() {
    return {
      isIndex: true, // 是否为展示页
      queryForm: {
        search: "", // 搜索内容
        page: 1, // 页数
        pageSize: 10, // 条数
        type: "", // 类型 point游点不一样 top热门推荐
      },
      total: 0, // 总数
      status: "loadmore", // 加载状态
      coverPath: "", // 广告位图片
      scenicList: [], // 游点不一样列表
      dataList: [], // 热门推荐列表
    };
  },
  created() {
    this.getCoverPath();
    this.getScenicList();
    this.getDataList();
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.queryForm.page++;
    this.getDataList();
  },
  methods: {
    // 获取广告位图片
    getCoverPath() {
      qiuOther().then((res) => {
        if (res.code == 1) {
          let obj = res.data.find((m) => m.type == "zbjd_top");
          this.coverPath = obj.img;
        }
      });
    },
    // 获取游点不一样列表
    getScenicList() {
      let data = {
        page: 1,
        pageSize: 3,
        type: "point",
      };
      qiuAroundList(data).then((res) => {
        if (res.code == 1) {
          this.scenicList = res.data.list;
        }
      });
    },
    // 获取热门推荐、搜索
    getDataList() {
      this.status = "loading";
      qiuAroundList(this.queryForm)
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.list;
            let page = this.queryForm.page;
            this.dataList = page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 搜索
    handleSearch() {
      this.isIndex = this.queryForm.search ? false : true;
      this.queryForm.page = 1;
      this.getDataList();
    },
    // 跳转景点详情
    handleScenic(val) {
      uni.navigateTo({ url: "/pages/qiu/scenicDetail?id=" + val.id });
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  padding: 20rpx;
  .y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 0;
    .y-item {
      flex: 1;
      // width: 216rpx;
      height: 268rpx;
      background-color: #f5f5f5;
      border-radius: 20rpx 20rpx 0 0;
      background-size: cover;
      position: relative;
      margin-right: 30rpx;
      &:last-child {
        margin-right: 0;
      }
      &:active {
        opacity: 0.9;
      }
      .y-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 138rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 20rpx 20rpx 0 0;
        padding: 20rpx 10rpx;
        box-sizing: border-box;
        > text {
          position: absolute;
          bottom: 16rpx;
          left: 10rpx;
          font-size: 20rpx;
          color: #e9f4f4;
        }
      }
    }
    .w-row {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
